<template>
	<view>
		<!-- <view class="field-line"><label class="f-title">通行证类型</label><label class="f-content">{{values.passType}}</label></view>
		 -->
		<QSInput 
			v-if="values.passCheckNum != '' " 
			:name="formName"
			variableName="pass_check_num" 
			title="通行证编号" 
			placeholder=" "
			:tapClear="itemTapClear"
			v-model="values.passCheckNum"
			:itemDisabled="itemDisabled"
			>
		</QSInput>
		<QSInput :name="formName" variableName="pass_check_status" contentStyle="color:#FF0000;" title="通行证状态" placeholder=" " :tapClear="itemTapClear" v-model="values.passCheckStatus" :itemDisabled="itemDisabled"></QSInput>
		<QSInput v-if="values.auditRemark != '' " :name="formName" variableName="audit_remark" title="审核意见" placeholder=" " :tapClear="itemTapClear" v-model="values.auditRemark" :itemDisabled="itemDisabled"></QSInput>
		
		<!-- <QSInput :name="formName" variableName="pass_type" title="通行证类型" :tapClear="itemTapClear" v-model="values.passType" :itemDisabled="itemDisabled"></QSInput>
		 -->
		<QSInput :name="formName" variableName="car_num" title="车牌号" :tapClear="itemTapClear" v-model="values.carNum" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		<QSInput :name="formName" variableName="car_type" title="车辆类型" :tapClear="itemTapClear" v-model="values.carType" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		<QSInput :name="formName" variableName="subordinate_unit" title="个人/单位" :tapClear="itemTapClear" v-model="values.subordinateUnit" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		
		<QSInput :name="formName" variableName="driver_name" title="驾驶员" :tapClear="itemTapClear" v-model="values.driverName" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		<QSInput :name="formName" variableName="contact_number" title="联系电话" :tapClear="itemTapClear" v-model="values.contactNumber" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		<QSInput :name="formName" variableName="driver_id_card" title="身份证号" :tapClear="itemTapClear" v-model="values.driverIdCard" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		
		<QSInput :name="formName" variableName="app_start_time" title="申请开始时间" :tapClear="itemTapClear" v-model="values.appStartTime" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		<QSInput :name="formName" variableName="app_end_time" title="申请结束时间" :tapClear="itemTapClear" v-model="values.appEndTime" placeholder=" " :itemDisabled="itemDisabled"></QSInput>
		<QSTextarea :name="formName" variableName="app_the_reason" title="申请理由" :tapClear="itemTapClear" v-model="values.appTheReason" placeholder=" " :itemDisabled="itemDisabled"></QSTextarea>

		<view v-if = "values.drivingPath != ''" class="driving_path">
			<view class="path-title">
				<label>通行路径</label>
			</view>
			<view class="path-content">
				<label>{{values.drivingPath}}</label>
			</view>
			
		</view>
		
		<view v-if = "passCheckImgFile != null" class="image-item">
			<view class="image-title">通行证</view>
			<view class="image-notice">
				<label>提示：可以长按下放通行证图片保存到手机，自行打印通行证</label>
			</view>
			<view class="image-content">
				<image mode="aspectFit" 
				    :src="clacPath(passCheckImgFile)"
					@error="imageError"></image>
			</view>
		</view>

		<!-- <QSInput :name="formName" variableName="start_address" title="入城点" :tapClear="itemTapClear" v-model="values.startAddress" :itemDisabled="itemDisabled"></QSInput>
		<QSInput :name="formName" variableName="end_address" title="目的地" :tapClear="itemTapClear" v-model="values.endAddress" :itemDisabled="itemDisabled"></QSInput>
		 -->
		<view v-if = "!previewPics" class="preview-pics">
			<text @click="showPics()">点击查看全部图片</text>
		</view>
		<view v-else class="image-list">
			<view class="image-item" v-for="(item,index) in imageList" :key="index">
				<view class="image-title">{{clacTitle(item)}}</view>
				
				<view class="image-content">
					<image mode="aspectFit" 
					    :src="clacPath(item)"
						@error="imageError"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import QSApp from '@/components/QS-inputs-split/js/app.js';
	export default {
		data() {
			return {
				title: 'Hello',
				formName: 'input',
				values: {
					passCheckNum: '',
					passCheckStatus: '',
					passCheckAdvice: '',
					passType: '',
					carType: '',
					startAddress: '',
					endAddress: '',
					appStartTime: '',
					appEndTime: '',
					passStartTime: '',
					passEndTime: '',
					carNum: '',
					subordinateUnit: '',
					driverName: '',
					contactNumber: '',
					driverIdCard: '',
					appTheReason: '',
					drivingPath: '',
					auditRemark: ''
				},
				itemDisabled: true,
				itemTapClear: false,
				nCode: '',
				picsData: [{title: '', required: true}],
				
				reqId: null,
				reqPassCheckNum:null,
				
				passCheckImgFile: null,
				imageList:[],
				previewPics: false,
			}
		},
		onLoad(options){
			let _this = this;
			console.log("applyInfo onLoad...");
			console.log(options);
			
			if(options==null){
				return;
			}
			//debugger;
			if(options.id)
				_this.reqId = options.id;
			if(options.passCheckNum)
				_this.reqPassCheckNum = options.passCheckNum;
		},
		onShow(){
			let _this = this;
			
			_this.loadData();
		},
		methods: {
			loadData(){
				let _this = this;
				
				let params = {};
				let url = "/rest/passInfo";
				
				
				if(_this.reqId!=null){
					params.id = _this.reqId;
					// uni.showToast({
					// 	title: "reqId:" + _this.reqId,
					// 	icon: "none"
					// });
				}else if(_this.reqPassCheckNum!=null){
					params.passCheckNum = _this.reqPassCheckNum;
					params.passCheckNumOperator = "eq";
					
					// uni.showToast({
					// 	title: "reqId:" + _this.reqPassCheckNum,
					// 	icon: "none"
					// });
				}else{
					uni.showToast({
						title: "没有输入查询条件",
						icon: "none"
					});
					uni.navigateBack();
					return;
				}
				
				
				_this.$api.request(url, params, failres => {
					uni.showToast({
						title: "服务器异常",
						icon: "none"
					});
				}).then(rsp => {
					console.log('获取表单数据成功:' + JSON.stringify(rsp));
					if(rsp.code == 200){
						//true success
						_this.fillDetail(rsp.data.detail);
						_this.fillPics(rsp.data.dynamic);
						
						_this.passCheckImgFile = rsp.data.passCheckImgFile;
					}
					
				})
			},
			fillDetail(detail){
				let _this = this;

				if(detail.passCheckNum)
					_this.values.passCheckNum = detail.passCheckNum;
				if(detail.passCheckStatus)
					_this.values.passCheckStatus = detail.passCheckStatus;
				if(detail.passCheckAdvice)
					_this.values.passCheckAdvice = detail.passCheckAdvice;
				_this.values.passType = detail.passType;
				_this.values.carType = detail.carType;
				_this.values.startAddress = detail.startAddress;
				_this.values.endAddress = detail.endAddress;
				if(detail.appStartTime)
					_this.values.appStartTime = detail.appStartTime.substring(0,10);
				if(detail.appEndTime)
					_this.values.appEndTime = detail.appEndTime.substring(0,10);
				if(detail.passStartTime)
					_this.values.passStartTime = detail.passStartTime.substring(0,10);
				if(detail.passEndTime)
					_this.values.passEndTime = detail.passEndTime.substring(0,10);
				
				_this.values.carNum = detail.carNum;
				_this.values.subordinateUnit = detail.subordinateUnit;
				_this.values.driverName = detail.driverName;
				_this.values.contactNumber = detail.contactNumber;
				_this.values.driverIdCard = detail.driverIdCard;
				_this.values.appTheReason = detail.appTheReason;
				_this.values.drivingPath = detail.drivingPath;
				
				if(detail.auditRemark)
					_this.values.auditRemark = detail.auditRemark;
				
				
			},
			fillPics(dynamic){
				let _this = this;
				
				_this.imageList = dynamic;
			},
			clacTitle(item){
				if(item.sort>0){
					return item.fieldCnName+"-" + item.sort;
				}else{
					return item.fieldCnName;
				}
			},
			clacPath(item){
				let _this = this;
				//debugger;
				if(item == null || 
					item == undefined ||
					item.filePath == undefined ||
					item.filePath == ''){
					
					//return  _this.$api.defConfig().baseUrl + "/mh5/static/imgs/ktjingcha.png";
					return "";
				}
				
				
				//console.log(JSON.stringify(item));
				let url = _this.$api.defConfig().baseUrl +"/upimg/"+ item.filePath;
				//console.log(url);
				
				return url;
			},
			showPics(){
				let _this = this;
				
				_this.previewPics = true;
			}
		}
	}
</script>

<style>
	.field-line{
		width:100%;
		flex: 1;
	}
	.f-title{
		width:30%;
		float: left;
	}
	
	.f-content{
		width:70%;
		float: right;
	}
	
	.preview-pics{
		height:300upx;
		line-height: 300upx;
		width:100%;
		text-align: center;
		background: linear-gradient(to bottom,#ffffff,#eeeeee,#ffffff);
		color:#E93B3D;
	}
	
	.image-title{
		margin-top: 50upx;
		margin-bottom: 20upx;
	}
	
	.image-content{
		padding-left: 5%;
		image{
			width: 90%;
			height: 200px;
			background-color: #eeeeee;
		}
	}
	
	.image-notice{
		color: #FF0000;
		font-size: 24upx;
	}
</style>
